<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<style>
		.logincontain {
			border-radius: 15px;
			background-clip: border-box;
			margin: 180px auto;
			width: 350px;
			padding: 15px 35px 15px 35px;
			background: #fff;
			border: 1px solid #eaeaea;
			box-shadow: 0 0 25px #cac6c6;
		}

		.el-form-item__content {
			display: flex;
			align-items: center;
		}
	</style>
</head>


<body>
	<div id="app" v-cloak>
		<div class="">
			<el-form :rules="rules" ref="form" :model="form" label-width="80px" class="logincontain">
				<h3 style="text-align: center;">登录系统</h3>
				<el-form-item label="用户名" prop="username">
					<el-input type="text" v-model="form.username" placeholder="请输入用户名"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
				</el-form-item>
				<el-form-item label="验证码" prop="code">
					<el-input style="width: 180px;margin-right: 5px;" type="text" v-model="form.code" placeholder="请输入验证码">
					</el-input>
					<img :src="imgurl" @click="updateImg()" style="width: 128px;" />
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="onSubmit(form)">登录</el-button>
					<el-button>取消</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
	<!-- 引入样式文件 -->
	<!-- 引入 Vue 和 Vant 的 JS 文件 -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<!-- <script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script> -->

	<script>
		var app = new Vue({
			el: '#app',
			data: {
				imgurl: '',
				form: {
					username: '',
					password: '',
					code: '',
					key: '',
				},
				rules: {
					username: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						},
						// { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						// { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
					],
					code: [{
							required: true,
							message: '请输入验证码',
							trigger: 'blur'
						},
						// { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
					],
				},
			},
			created() {
				let self = this
				this.updateImg()
			},
			methods: {
				updateImg() {
					// axios.post('/tpapi/public/index.php/admin/login/verify').then(res => {
					// 上面是部署在phpstudy里 下面是php run用的
					axios.post('/admin/login/verify').then(res => {
						this.imgurl = res.data.img
						this.form.key = res.data.key
					})
				},
				onSubmit(form) {
					let self = this
					this.$refs.form.validate((valid) => {
						if (valid) {

							var Params = {
								username: this.form.username,
								password: this.form.password,
								code: this.form.code,
							};
							// axios.post('/tpapi/public/index.php/admin/login', Params).then(res => {
								// 上面是部署在phpstudy里 下面是php run用的
							axios.post('/admin/login', Params).then((res) => {
								let type = res.data.code == 200 ? 'success' : 'error';
								this.$message({
									message: res.data.msg,
									type: type
								});
								if (type == 'success') {
									sessionStorage.setItem("userInfo", JSON.stringify(res.data.data));
									sessionStorage.setItem("token", res.data.data);
									// if(sessionStorage.getItem("token")){
									window.location.href = '../home/index.html'
									// console.log(this.$router);
									// this.$router.push({
									// 	path: "/home"
									// })
									// }
									// this.$router.push({ path: "/home" });
									// this.$router.replace({ path: "/home" })
									// return
								}
								this.updateImg()

							}).catch((error) => {
								//接口调用方法统一处理
								// this.logining = false;
								this.updateImg()
							});

						} else {
							this.updateImg()
							console.log('error submit!!');
							return false;
						}
					});
				}
			}
		});
	</script>
</body>

</html>